<template>
    <div>
        <div id="list-item" :class="{'active':isActive}" @click="handleClick">
            <div class="title">
                <el-checkbox :indeterminate="isInder" v-model="checkAll" @change="handleChange"></el-checkbox>
                {{ dataObj.ver_num }}
            </div>
            <div class="chidren">
                <el-checkbox
                v-model="childList[ind]"
                v-for="(cdata, ind) in dataObj.ver_desc_arr"
                :key="ind"
                @change="handleChange2($event,ind)">{{ cdata }}</el-checkbox>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'listItem',
    props: ['dataObj'],
    data () {
      return {
        isInder: false,
        isActive: false,
        checkAll: false,
        childList: [false]
      }
    },
    methods: {
        handleClick () {
            this.isActive = !this.isActive
        },
        handleChange (checked) {
            // this.isInder = checked
            if (checked) {
                this.dataObj.ver_desc_arr.forEach((data, ind) => {
                    this.childList.splice(ind, 1, true)
                })
            } else {
                this.dataObj.ver_desc_arr.forEach((data, ind) => {
                    this.childList.splice(ind, 1, false)
                })
            }
        },
        handleChange2 (checked, ind) {
            this.childList.splice(ind, 1, checked)
            this.checkNodes(checked)
        },
        checkNodes (checked) {
            if (checked) {
                if (this.childList.indexOf(false) === -1) {
                    this.checkAll = this.dataObj.ver_desc_arr.length === this.childList.length
                    if (this.checkAll) {
                        this.isInder = false
                    } else {
                        this.isInder = true
                    }
                } else {
                    this.isInder = true
                }
            } else {
                if (this.childList.indexOf(true) !== -1) {
                    if (this.childList.indexOf(false) === -1) {
                        this.checkAll = this.dataObj.ver_desc_arr.length === this.childList.length
                        if (this.checkAll) {
                            this.isInder = false
                        } else {
                            this.isInder = true
                        }
                    } else {
                        this.isInder = true
                    }
                } else {
                    this.isInder = false
                    this.checkAll = false
                }
            }
        }
    }
  }
</script>
<style lang="stylus">
#list-item
    max-height 36px
    line-height 36px
    overflow hidden
    transition max-height .3s linear
    border-bottom 1px solid #ebeef5
    cursor pointer
    & > .el-checkbox
        display block
    .chidren
        padding-left 15px
        border-bottom 1px solid #ebeef5
        .el-checkbox
            line-height 36px
            &:last-child
                border-bottom 0 none
    &.active
        max-height 72px
        background #fff !important
</style>
